<template>
  <div>
    <div class="con">
      <div class="title">
        <p class="con-title">
          <span>
            <img src="@/assets/img/control/content/Group769.png" />
          </span>
          <span>合同管理</span>
        </p>
      </div>
      <div class="query">
        <el-form ref="queryParamsRef" inline :model="queryParams">
          <el-form-item props="startTime">
            <el-date-picker
              v-model="queryParams.params.startTime"
              placeholder="请选择起始时间"
              value-format="YYYY-MM-DD HH:mm:ss"
              type="date"
              clearable
            />
          </el-form-item>
          <el-form-item props="endTime">
            <el-date-picker
              v-model="queryParams.params.endTime"
              placeholder="请选择结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
              type="date"
              clearable
            />
          </el-form-item>
          <el-form-item props="id">
            <el-input v-model="queryParams.id" placeholder="请输入合同编号" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="querySearch"> 查询 </el-button>
            <el-button type="primary" plain @click="resetQuery">重置 </el-button>
          </el-form-item>
        </el-form>
        <div style="flex: 1">
          <el-button type="primary" style="float: right" @click="handleDetail(false)">
            合同申请
          </el-button>
        </div>
      </div>
      <div style="margin: 10px">
        <el-text type="warning">提示信息：合同需要双方线下盖章，请联系平台合同管理人员 李智 18608303160</el-text>
      </div>
      <el-table border :data="dataList" header-cell-class-name="title-style">
        <el-table-column prop="id" label="合同编号" align="center" />
        <el-table-column label="合同类型" align="center">
          <template #default="scope">
            {{ getEnumsLabel(scope.row.shoppingCarEnums) }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间" align="center" />
        <el-table-column prop="contractDate" label="签约时间" align="center" />
        <el-table-column label="状态" align="center">
          <template #default="scope">
            {{ getStatusLabel(scope.row.contractStatus) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="handleDetail(scope.row)"> 详情 </el-button>
            <el-button link type="primary" @click="handleCancel(scope.row)"> 作废 </el-button>
            <el-popover trigger="click" :width="160">
              <el-button link type="primary" icon="Download" @click="handleDownload(scope.row)">
                下载模板合同
              </el-button>
              <br />
              <el-button
                link
                type="primary"
                icon="Download"
                :disabled="!scope.row.attachment"
                @click="handleStampDownload(scope.row)"
              >
                下载盖章合同
              </el-button>
              <template #reference>
                <el-button link type="primary"> 下载 </el-button>
              </template>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-footer">
        <el-pagination
          :total="total"
          v-model:current-page="queryParams.params.pageNum"
          v-model:page-size="queryParams.params.pageSize"
          layout="total, prev, pager, next"
          small
          @size-change="getList"
          @current-change="getList"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { contractList, contractCancel, contractDownload } from "@/api/control/order";
import { download } from "@/api/cloud/index";
import { useRouter } from "vue-router";
const router = useRouter();

const dataList = ref(); // 合同列表
const total = ref(0); // 总条数
const queryParams = ref<any>({
  id: "",
  params: {
    pageNum: 1,
    pageSize: 10,
    startTime: "",
    endTime: "",
  },
});
const typeList = ref<any>([
  { value: "CLOUD_SERVER", label: "云服务器" },
  { value: "CLOUD_MARKET", label: "云市场" },
  { value: "GOV_CLOUD", label: "政务云" },
]);
const statusList = ref<any>([
  { value: "-1", label: "已作废" },
  { value: "0", label: "待审核" },
  { value: "1", label: "创建中" },
  { value: "2", label: "已完成" },
  { value: "3", label: "已拒绝" },
]);

onMounted(() => {
  getList();
});

// 获取合同列表
const getList = () => {
  contractList(queryParams.value).then((res: any) => {
    dataList.value = res.rows;
    total.value = res.total;
  });
};

// 获取类型中文名称
const getEnumsLabel = (val: any) => {
  let row = typeList.value.find((i: any) => i.value == val);
  return row ? row.label : "";
};

// 获取状态中文名称
const getStatusLabel = (val: any) => {
  let row = statusList.value.find((i: any) => i.value == val);
  return row ? row.label : "";
};

// 搜索
const querySearch = () => {
  queryParams.value.params.pageNum = 1;
  getList();
};

// 重置
const resetQuery = () => {
  queryParams.value.params.startTime = "";
  queryParams.value.params.endTime = "";
  queryParams.value.id = "";
  queryParams.value.params.pageNum = 1;
  getList();
};

// 合同作废
const handleCancel = (row: any) => {
  ElMessageBox.confirm("作废后将无法查询到该条合同，确认作废吗?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      contractCancel(row.id).then(() => {
        ElMessage.success("合同已作废");
        getList();
      });
    })
    .catch(() => {});
};

// 下载
const handleDownload = (row) => {
  ElMessageBox.confirm(`确认下载本条模板合同吗?`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      contractDownload([row.id]).then((res: any) => {
        console.log(res);
        let fileName = res.headers["content-disposition"]?.split(";")[1];
        let name = decodeURIComponent(fileName).split("=")[1];
        console.log(fileName, name);
        let alink = document.createElement("a");
        alink.href = window.URL.createObjectURL(new Blob([res.data]));
        alink.download = name;
        alink.click();
        alink.remove();
      });
    })
    .catch(() => {});
};

// 下载
const handleStampDownload = (row: any) => {
  ElMessageBox.confirm("确认下载编号为【" + row.id + "】的盖章合同吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      const type = row.attachment.substr(
        row.attachment.lastIndexOf("."),
        row.attachment.length
      );
      let url = row.attachment;
      url = url.replace("/profile", "");
      download({ fileName: url, delete: false }).then((res: any) => {
        let alink = document.createElement("a");
        alink.href = window.URL.createObjectURL(new Blob([res.data]));
        alink.download = "盖章合同" + new Date().getTime() + type;
        alink.click();
        alink.remove();
      });
    })
    .catch(() => {});
};

// 跳转合同详情
const handleDetail = (row: any) => {
  let query = {} as any;
  if (row) query.id = row.id;
  router.push({
    path: "/control/financialAfterSale/contractors",
    query,
  });
};
</script>
<style lang="less" scoped>
.con {
  width: 100%;
  height: auto;
  .con-title {
    width: 100%;
    height: 25px;
    display: flex;
    align-items: center;
    span:nth-child(1) {
      display: flex;
      align-items: center;
      img {
        width: 14px;
        height: 14px;
      }
    }
    span:nth-child(2) {
      display: flex;
      align-items: center;
      margin-left: 10px;
      font-size: 16px;
    }
  }
  .query {
    width: 100%;
    height: 50px;
    margin: 20px 0;
    display: flex;
  }
  .page-footer {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
  }
}
</style>
<style>
.title-style {
  height: 60px;
  background-color: #f6faff !important;
}
</style>
